<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑教师信息</title>
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .container {
            padding: 20px 40px;
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 30px auto;
        }
        h2.layui-text {
            text-align: center;
            margin-bottom: 30px;
            color: #1e9fff;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .form-row {
            margin-bottom: 15px;
        }
        .submit-btn {
            display: block;
            width: 200px;
            margin: 30px auto 10px;
            height: 45px;
            font-size: 16px;
        }
    </style>
</head>
<body>

<div class="container">
    <h2 class="layui-text">编辑教师信息</h2>

    <form class="layui-form" id="editForm">
        <input type="hidden" name="teacherId" id="teacherId">
        <input type="hidden" name="password" id="password">

        <div class="form-row">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="teacherName" id="teacherName" required lay-verify="required"
                       placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" id="sexSelect" lay-verify="required">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">学院</label>
            <div class="layui-input-block">
                <input type="text" name="institute" id="institute" required lay-verify="required"
                       placeholder="请输入学院" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <input type="text" name="tel" id="tel" required lay-verify="required|phone"
                       placeholder="请输入电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">电子邮件</label>
            <div class="layui-input-block">
                <input type="email" name="email" id="email" lay-verify="email"
                       placeholder="请输入电子邮件" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="cardId" id="cardId" required lay-verify="required"
                       placeholder="请输入身份证号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">职称</label>
            <div class="layui-input-block">
                <input type="text" name="type" id="type" required lay-verify="required"
                       placeholder="请输入职称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="form-row">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="role" id="role" lay-verify="required">
                    <option value="0">管理员</option>
                    <option value="1">教师</option>
                    <option value="2">学生</option>
                </select>
            </div>
        </div>

        <button class="layui-btn layui-btn-fluid submit-btn" lay-submit lay-filter="submitEdit">保存修改</button>
    </form>
</div>

<script src="../../../lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        const form = layui.form;
        const layer = layui.layer;

        const localDataStr = localStorage.getItem('currentTeacher');
        if (!localDataStr) {
            layer.msg("未获取到教师信息！");
            return;
        }
        const teacher = JSON.parse(localDataStr);

        // 填充表单
        document.getElementById('teacherId').value = teacher.teacherId || '';
        document.getElementById('password').value = teacher.password || '';
        document.getElementById('teacherName').value = teacher.teacherName || '';
        document.getElementById('sexSelect').value = teacher.sex || '男';
        document.getElementById('institute').value = teacher.institute || '';
        document.getElementById('tel').value = teacher.tel || '';
        document.getElementById('email').value = teacher.email || '';
        document.getElementById('cardId').value = teacher.cardId || '';
        document.getElementById('type').value = teacher.type || '';
        document.getElementById('role').value = teacher.role || '1';

        form.render();

        // 提交
        form.on('submit(submitEdit)', function(){
            const teacherData = {
                teacherId: parseInt(document.getElementById('teacherId').value),
                password: document.getElementById('password').value,
                teacherName: document.getElementById('teacherName').value,
                sex: document.getElementById('sexSelect').value,
                institute: document.getElementById('institute').value,
                tel: document.getElementById('tel').value,
                email: document.getElementById('email').value,
                cardId: document.getElementById('cardId').value,
                type: document.getElementById('type').value,
                role: document.getElementById('role').value
            };

            fetch('/teacher', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(teacherData)
            }).then(res => res.json()).then(res => {
                if(res.code === 200) {
                    layer.msg("教师信息更新成功！", {
                        icon: 1,
                        time: 1500
                    }, function() {
                        const index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layui.table.reload('teacherTable');
                    });
                } else {
                    layer.msg("更新失败：" + (res.msg || '未知错误'));
                }
            }).catch(err => {
                layer.msg("请求失败：" + err.message);
            });

            return false;
        });
    });
</script>
</body>
</html>
